<!DOCTYPE html>
<html>

<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
    <link rel="stylesheet" type="text/css" href="https://csshake.surge.sh/csshake.min.css">
    <title>登录</title>
</head>

<body>

    <div class="container">
        <div class="head_guide_two">
            <div class="goBack_two">
                <img src="./Images/back.png">
            </div>
            <div class="title_two">首页</div>
            <div class="empty"></div>
        </div>
        <div class="head_img">
            <img src="./Images/sign.png">
        </div>
        <div class="main">
            <div class="main_in_input">
                <div class="main_in">
                    <input type="text" class="" placeholder="小米账号/手机号/邮箱">
                    <p class="main_in_attention_username">账号不能为空!</p>
                </div>
                <div class="main_in">
                    <input type="password" placeholder="密码">
                    <p class="main_in_attention_password">密码不能为空!</p>
                </div>
            </div>
            <div class="main_in_text_one">
                <div class="main_in_text_one_radius"></div>
                <div class="text_orgin">《小米商城用户协议》、《小米商城隐私政策》、《小米帐号用户协议》、《小米帐号隐私政策》</div>
            </div>
            <div class="main_in_text_two">
                请您仔细阅读以上协议，其中有对您权利义务的特别约定等重要条款，同意后方可使用本软件
            </div>
            <div class="main_in_button_login">
                <button>登录</button>
            </div>
            <div class="main_in_bottom">
                <div class="main_in_bottom_forget">忘记密码</div>
                <div class="main_in_bottom_check">验证码登录</div>
            </div>
        </div>
        <div class="footer">
            <div class="footer_spider">
                <span style="white-space:pre"> </span><span class="line"></span>
                <span style="white-space:pre"> </span><span class="txt">其他登录方式</span>
                <span style="white-space:pre"> </span><span class="line"></span>
            </div>
            <div class="footer_list">
                <div>
                    <img src="./Images/weixin.png">
                </div>
                <div>
                    <img src="./Images/QQ.png">
                </div>
                <div>
                    <img src="./Images/weibo.png">
                </div>
                <div>
                    <img src="./Images/apple.png">
                </div>
            </div>
        </div>
    </div>
    <script>
        window.onload = function () {
            var login = document.querySelector('.main_in_button_login')
            login.addEventListener('click', function () {
                var textAll = document.querySelectorAll('input')
                var username = textAll[0].value.trim();
                var password = textAll[1].value.trim();
                if (username != '' && password != '') {
                    localStorage.setItem('username', username)
                    localStorage.setItem('password', password)
                    location.href = './Index.html'
                } else if (username == '') {
                    textAll[0].className = 'shake-little shake-constant'
                    var usernameStyle = document.querySelector('.main_in_attention_username')
                    usernameStyle.style.display = 'block'
                    textAll[0].addEventListener('click', function () {
                        textAll[0].className = null
                        usernameStyle.style.display = 'none'
                    })
                } else if (password == '') {
                    textAll[1].className = 'shake-little shake-constant'
                    var passwordStyle = document.querySelector('.main_in_attention_password')
                    passwordStyle.style.display = 'block'
                    textAll[1].addEventListener('click', function () {
                        textAll[1].className = null
                        passwordStyle.style.display = 'none'
                    })
                }
            })
            document.querySelector('.goBack_two').addEventListener('click', function () {
                location.href = './Index.html'
            })
            document.querySelector('.main_in_text_one_radius').addEventListener('click', function () {
                if (this.style.backgroundColor == '') {
                    this.style.backgroundColor = 'orangered'
                } else {
                    this.style.backgroundColor = ''
                }
            })
        }
    </script>
</body>
<link rel="stylesheet" href="./css/LoginBySecret.css">
<link rel="stylesheet" href="./css/All.css">

</html>